<template>
    <div class="m-istyle">
        <dl @mouseover="over" :class="nav.class">
            <dt>{{ nav.title }}</dt>
            <dd v-for="(item, index) in nav.list" :key="index" :class="{ active: kind == item.tab }"
                :data-type="item.tab">
                {{ item.text }}
            </dd>
        </dl>
        <ul class="ibody">
            <li v-for="(item, index) in resultsData[kind]" :key="index">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                    <img :src="item.image" class="image">
                    <div class="cbody">
                        <div class="title" :title="item.title">{{ item.title }}</div>
                        <div class="sub-title" :title="item.sub_title">{{ item.sub_title }}</div>
                        <div class="price-info" >
                        <!-- <div class="price-info" v-if="item.return && item.price_info.current_price"> -->
                            <span class="current-price-warpper">
                                <span class="price-symbol numfont">￥</span>
                                <span class="current-price numfont">{{ item.price }}</span>
                                <!-- <span class="current-price numfont">{{ item.price_info.current_price }}</span> -->
                            </span>
                              <span class="sold bootom-right-info">{{ item.address }}</span>
                            <!-- <span class="old-price">门市价${{ item.price_info.old_price }}</span>
                            <span class="sold bootom-right-info">{{ item.address }}</span> -->
                        </div>

                        <!-- <div class="price-info" v-else-if="!item.rentNum">
                            <span class="current-price-warpper">
                                <span class="price-symbol numfont"></span>
                                <span class="current-price numfont">抢光啦</span>
                            </span>
                        </div>

                        <div class="price-info" v-else>
                            <span class="current-price-warpper">
                                <span class="price-symbol numfont">￥</span>
                                <span class="current-price numfont">{{ item.price_info.avg_price }}</span>
                                <span class="units">/{{ item.price_info.units }}均</span>
                            </span>
                        </div> -->

                    </div>
                </el-card>
            </li>
        </ul>
    </div>
</template>

<script>
import api from '@/api/index.js'
export default {
  name: 'container',
  data () {
    return {
      kind: 'all',
      resultsData: {}
      // list:[]
      // list: [{
      //     image: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
      //     title: 'COSTA COFFEE(新国店)',
      //     sub_title: '巧克力巧酥卷小美式, 建议单人使用',
      //     price_info: {
      //         current_price: 18,
      //         old_price: 36,
      //         avg_price: null,
      //         units: null
      //     },
      //     rentNum: 0,
      //     address: '崇文门'
      // }, {
      //     image: '//p0.meituan.net/merchant/cfd49a3ffabc0e8740e9820be50f42ef6464318.png@214w_120h_1e_1c',
      //     title: '宽板凳老灶火锅（古城店）',
      //     sub_title: '巧克力巧酥卷小美式, 建议单人使用',
      //     price_info: {
      //         current_price: null,
      //         old_price: null,
      //         avg_price: 18,
      //         units: '人'
      //     },
      //     rentNum: 10,
      //     address: '古城/八角'
      // }, {
      //     image: '//p1.meituan.net/ugcpic/670527a3a73369867db524ade381e5b6@214w_120h_1e_1c',
      //     title: 'COSTA COFFEE(新国店)',
      //     sub_title: '巧克力巧酥卷小美式, 建议单人使用',
      //     price_info: {
      //         current_price: null,
      //         old_price: null,
      //         avg_price: 188,
      //         units: '人'
      //     },
      //     rentNum: 30,
      //     address: '崇文门'
      // }, {
      //     image: '//p0.meituan.net/ugcpic/2918e9461055e708cce4cc8e7f2543b5@214w_120h_1e_1c',
      //     title: 'COSTA COFFEE(新国店)',
      //     sub_title: '巧克力巧酥卷小美式, 建议单人使用',
      //     price_info: {
      //         current_price: null,
      //         old_price: null,
      //         avg_price: 88,
      //         units: '人'
      //     },
      //     rentNum: 20,
      //     address: '崇文门'
      // }, {
      //     image: '//p1.meituan.net/msmerchant/bf85dbe137a9c06e104cfe62748f31fd161469.jpg@214w_120h_1e_1c',
      //     title: 'COSTA COFFEE(新国店)',
      //     sub_title: '巧克力巧酥卷小美式, 建议单人使用',
      //     price_info: {
      //         current_price: null,
      //         old_price: null,
      //         avg_price: 38,
      //         units: '人'
      //     },
      //     rentNum: 20,
      //     address: '崇文门'
      // }, {
      //     image: '//p1.meituan.net/msmerchant/1efe61c624e97c172fc335a18c179ccc755625.png@214w_120h_1e_1c',
      //     title: 'COSTA COFFEE(新国店)',
      //     sub_title: '巧克力巧酥卷小美式, 建议单人使用',
      //     price_info: {
      //         current_price: null,
      //         old_price: null,
      //         avg_price: 16,
      //         units: '人'
      //     },
      //     rentNum: 20,
      //     address: '崇文门'
      // }]
    }
  },
  created () {
    api.getResultProducts().then(res => {
      console.log(res, 123)
      this.resultsData = res.data.data
    })
  },
  props: ['nav'],
  methods: {
    over (e) {
      const dom = e.target
      const tagName = dom.tagName.toLowerCase()
      if (tagName !== 'dd') {
        return false
      }
      this.kind = dom.getAttribute('data-type')
      // 动态获取数据 ajax请求
    }
  }

}
</script>

<style lang="scss">
@import "@/assets/css/index/artistic.scss";
</style>
